/* stylelint-disable declaration-no-important */
/* stylelint-disable selector-pseudo-class-no-unknown */

.cards-price-plan__range {
  position: relative;
  height: 24px;
}

.cards-price-plan__range [type=range i] {
  appearance: none;
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 6px;
  background-color: transparent;
  border-radius: 3px;
  transform: translate(-50%, -50%);

  &::-webkit-slider-thumb {
    appearance: none;
    position: relative;
    z-index: 200;
    width: 40px;
    height: 24px;
    cursor: pointer;
    background: var(--pneumatic-color-link) url('') no-repeat center center / contain;
    border-radius: 24px;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      content: '';
    }
  }

  &::-moz-range-thumb {
    position: relative;
    z-index: 200;
    width: 40px;
    height: 24px;
    cursor: pointer;
    background: var(--pneumatic-color-link) url('') no-repeat center center / contain;
    border: none;
    border-radius: 24px;
  }

  &::-ms-thumb {
    position: relative;
    z-index: 200;
  }

  &:focus {
    outline: none;
  }
}

.cards-price-plan__fullnes {
  position: absolute;
  top: 50%;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 6px;
  background-color: var(--pneumatic-color-black16);
  border-radius: 3px;
  transform: translateY(-50%);

  > * {
    position: absolute;
    z-index: 100;
    left: 0;
    width: 1%;
    height: 100%;
    background-color: var(--pneumatic-color-black100);
    border-radius: 3px;
  }
}
